Struktur
Tagg Attribut Beskrivning Exempel
<html> xml:lang dir xmlns Den här taggen indikerar början på varje HTML-dokument. Den anger vilken version av HTML som tillämpas i dokumentet <html>
<head>
<title>
Exempel
</title>
</head>
<body>
detta syns i fönstret
</body>
</html>
<head> xml:lang dir profile Osynlig information. Inget som skrivs här syns i webläsaren. Måste innehålla <title>. Kan innehålla en mängd andra taggar som exempelvis <meta>, <link>, <script> och <style>.
<title> xml:lang dir Anger sidans titel, vilken visas högst upp i webbläsaren fönsterkant
<body> id class style title xml:lang dir onload onunload Allt som skrivs i BODY syns i webläsaren, det är alltså sidans kropp.
Text
Tagg Attribut Beskrivning Exempel
<div> id class style title xml:lang dir Används för utfomning med formatmallar. Radbrytning före och efter ett element. Här är texten<div>div avgränsad</div>.
Här är texten
avgränsad med div
.
<span> id class style title xml:lang dir Definerar endast bara ett textintervall. Ingen radbrytning före eller efter ett element. Här är texten<span>span avgränsad</span>.

Här är texten span avgränsad

.
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
id class style title xml:lang dir Detta är en rubrik, finns i 6 olika storlekar. Ingen radbrytning före eller efter ett element. <h1>Rubrik 1</h1>

Rubrik 1

<h2>Rubrik 2</h2>

Rubrik 2

<h3>Rubrik 3</h3>

Rubrik 3

<h4>Rubrik 4</h4>

Rubrik 4

<h5>Rubrik 5</h5>
Rubrik 5
<h6>Rubrik 6</h6>
Rubrik 6
<p> id class style title xml:lang dir Ger ett extra radavstånd till texten som kommer efter <p>Stycke 1 </p>, <p>Stycke 2.</p>

Stycke 1

Stycke 2

<br/> id class style title Den gör en radbrytning i texten. Oftas fortsätter sedan browsern i vänstermarginalen på nästa rad. Rad 1.<br/>
Rad 2.

Rad 1
Rad 2

<blockquote> id class style title xml:lang dir cite Elementet är beskrivande och stilistiskt semantik inbyggd. Den drar in en text, kan användas vid längre citat. Här är texten <blockquote>block citerad</blockquote>
Här är texten

block citerad

<pre> id class style title xml:lang dir xml:space Används för att tex. visa källkoden i en browser. och när man vill visa en text precis så som det är skrivet i koden. Här är texten <pre>förformaterad</pre>.
Här är texten
förformaterad
text
<abbr> id class style title xml:lang dir Visar att en text är en förkortning inom taggen Här är texten <abbr>förkortad</abbr>

Här är texten förkortad

<acronym> id class style title xml:lang dir visar att texten inom taggen är en akronym Här är texten <acronym>förkortad</acronym>

Här är texten förkortad

<address> id class style title xml:lang dir Visar för läsaren att texten är en adress Här är en<address>adress>/address>
Här är
adress
<cite> id class style title xml:lang dir Kan anvädas för att visa titel på en bok eller en xhtml uppgift. Texten blir lite kursiv Här är ett <cite>citat</cite>.
Här är ettcitat
<q> id class style title xml:lang dir cite Den här användas för kortare citat. Stöds inte ännu av de vanligaste browsrarna. Här är ett <q>kortare citat</q>;.
Här är ett kortare citat.
<dfn> id class style title xml:lang dir Används för att markera en definition. Det behöver inte bli något skillnad på texten i vissa browsar. Här är texten <dfn>definerad </dfn>.
Här är texten definierad.
<strong> id class style title xml:lang dir Används för att betona ett ord eller en mening i en text. Vanligtvis blir texten i fet stil. Här är texten <strong>betonad</strong>.
Här är texten betonad.
<em> id class style title xml:lang dir Talar om för browsern att texten skall emfaseras, normalt sätt blir texten kursiv. Här är texten <em>emfaserad</em>.
Här är texten emfaserad.
<kbd> id class style title xml:lang dir Antyder på att texten är skriven på ett tangentbord. Kan anvädas till manualer m.m. Här används <kbd>tangentbords</kbd> text.
Här används tangentbords text.
<code> id class style title xml:lang dir Kan användas för att visa upp källkod i browsen. Texten ser ut som <code>kod</code>.
Texten ser ut som kod text.
<samp> id class style title xml:lang dir Kan användas för att betona ett visst exempel i något program som tex. en output. Här används <samp>kod output</samp> text.
Här används kod output text.
<var> id class style title xml:lang dir Används för att ange namnet på en variabel som användaren ska ange till programet. Används oftast tillsammans med <code>. Här används <var>kod variabel</var> text.
Här används kodvariabel text.

Hypertext
Tagg Attribut Beskrivning Exempel
<a> id class style title xml:lang dir charset type href hreflang rel rev accesskey shape coords tabindex onfocus onblur Skapar en länk, finns olika typer av länkar. Attributet "href" anger adressen En absolut länk anger en fullständig adress.
<a href="http://www.dojjan.info.se/">En absolut länk till en HTML-sida</a>:
En absolut länk till världen coolaste sida.

En relativ länk används för det mesta när man länkar till en sida på samma webbplats. Istället för att skriva ut hela adressen länkar man endast till det HTML-dokument man vill nå:

<a href="index.htm">Relativ länk till en HTML-sida</a>:
Relativ länk till en HTML-sida

När man öppnar en e-post adress öppnas ett fönster så att man kan skicka e-post till adressen.

<a href="kris-lau@fc.dsv.su.se">E-posta Krille</a>:
E-posta Krille

En bildlänk skapas genom att man inom <a>-taggen sätter in en bild:

Valid XHTML 1.1!

Länkning kan ske till andra protokoll än HTTP till som tex FTP:

<a href="ftp://ftp.dsv.su.se/">En länkt till DSV via FTP</a>.
En länkt till DSV via FTP.

Man kan länka till en specifik del av sidan genom att sätta ut referenspunkter.

<a id="struktur">En referenspunkt</a>
.
En referenspunkt.
Så här gör man för att länka den:
<a href="struktur">En länk till en referenspunkt</a>
En länk till en referenspunkt.

Listor
Tagg Attribut Beskrivning Exempel
<ul> id class style title xml:lang dir Skapar en oordnad lista med en prick framför elementet <ul>
<li>
Element 1
</li>
<li>
Element 2
</li>
</ul>

  • Element 1
  • Element 2
<ol>
<li>
Element 1
</li>
<li>
Element 2
</li>
</ol>

  1. Element 1
  2. Element 2
<ol> id class style title xml:lang dir Skapar en ordnad lista, med en siffra eller en bokstav framför elementet.
<li> id class style title xml:lang dir Markerar en förekomst i en lista och används för oordnade listor <ul> och ordnade listor <ol>.
<dl> id class style title xml:lang dir Infogar en definitionslista som består av termer <dt> och definitioner av dessa termer <dd>. <dl>
<dt>
Term 1
</dt>
<dd>
Definition av Term 1
</dd>
</dl>

Term 1
Definition av Term 1
<dt> id class style title xml:lang dir Används i en definitionslists för att markera en term.
<dd> id class style title xml:lang dir Markerar en definition i en definitionslista. Måste finnas inom en sådan lista och efter <dt>.

Objekt
Tagg Attribut Beskrivning Exempel
<object> id class style title xml:lang dir declare classid codebase data type codetype archive standby height width usemap name tabindex Man stoppar in ett objekt eller ett äpple i dokumentet med hjälp av denna tag. <object data="text.txt" width="250" height="150"></object>
<param/> id name value valuetype type Man skicka parametrar till ett objekt eller ett äpple med hjälp av denna tag.

Formulär
Tagg Attribut Beskrivning Exempel
<form> id class style title xml:lang dir action method enctype onsubmit onreset accept acceptcharset Infogar ett formulär. Attributet "action" anger vilket program som skall köras på HTTP-server-sidan när man trycker på sänd och attributet "method" anger vilken HTTP-metod (post eller get) som skall användas. klicka här för exempel
<label> id class style title xml:lang dir for accesskey onfocus onblur. Används för att definiera en relation mellan ett fält och benämningen på detta fält. Genom att placera en input-tagg inom en label-tagg kan man skapa denna relation.
<input/> id class style title xml:lang dir type name value checked disabled readonly size maxlenght src alt usemap tabindex accesskey onfocus onblur onselect onchange accept Används för att skapa något form av fält, som tar input från besökaren. I attributet "type" anges vilken typ av fält som skall användas, exempelvis button, checkbox, image, password, radio och text.
<textarea> id class style title xml:lang dir name rows cols disabled readonly tabindex accesskey onfocus onblur onselect onchange Skapar en en större textarea där besökaren kan skriva in fler än en rad text. Dimensionerna kan regleras med attributen "cols" och "rows".
<select> id class style title xml:lang dir name size multiple disabled tabindex onfocus onblur onchange Anger att det finns flera möjliga val och används oftast i kombination med <option> för att skapa rullmenyer. Attribut som normalt används är "name", "size" och "multiple".
<option> id class style title xml:lang dir selected disabled label value Används för att ange olika val inom en <select>. Kan grupperas tillsammans med <optgroup>.

Tabell
Tagg Attribut Beskrivning Exempel
<table> id class style title xml:lang dir summary width border frame rules cellspacing dellpadding Skapar en tabell. Tabellen i sin tur kan endast innehålla <tr> eller någon av av delarna thead, tfoot, tbody, col eller colgroup. <table summary="Det här är sammanfattningen">
<caption>Det här är huvudrubriken</caption>
<tr>
<th>Underrubrik 1</th>
<th>Underrubrik 2</th> </tr>
<tr>
<td colspan="2">Det här är foten</td></tr>
<tr>
<td>X11</td>
<td>X12</td></tr>
<tr>
<td>X21</td>
<td>X22</td></tr>
</table>
Det här är huvudrubriken
Underrubrik 1 Underrubrik 2
X11 X12
X21 X22
<caption> id class style title xml:lang dir Används för att förklara innehållet i en tabell.
<tr> id class style title xml:lang dir char charoff align valign Skapar en ny rad i en tabell. Denna tagg kan innehålla en eller flera <th> eller <td>.
<th> id class style title xml:lang dir abbr axis headers scope rowspan colspan char charoff align valign Används för rubriker i en tabell och visas vanligtvis i fet stil.
<td> id class style title xml:lang dir abbr axis headers scope rowspan colspan char charoff align valign Avgränsar en cell i en rad. En cell kan innehålla text, bild, formulär eller en tabell. Genom att ange attributen "colspan" eller "rowspan" kan man bestämma hur många kolumner eller rader en cell skall spänna över.
Bild och bildkartor
Tagg Attribut Beskrivning Exempel
<img/> id class style title xml:lang dir src alt longdesc height widthusemap ismap Infogar en bild i webbsidan. Måste vara av en typ som stöds i en browser, till exempel gif, jpg och png. "Src" attributet anger länken till bildens filnamn. <img src="sko.jpg" alt="sko.jpg" />
sko.jpg

Metainformation
Tagg Attribut Beskrivning Exempel
<meta/> xml:lang dir http-equiv name content scheme Anges i huvudet på HTML-dokumentet. Används för att ange meta-information. Talar om vilka som är upphovsmän till dokumentet:

<meta name="author" content="krille krull" />

Beskrivning vad sidan handlar om:

<meta name="description" content="Detta är uppgift 1a" />

Visar vilka nyckelord sidan innehåller:

<meta name="keywords" content="uppgift 1a" />

Anger namnet och oftast versionen av det program som använts för att skriva HTML-koden.:

<meta name="generator" content="scintilla xhtml" />

Detta attribut skickar med namn/värde-par till servern, så att dessa inkluderas i HTML-dokumentets MIME-huvud. Anger man exempelvis "expires" så kommer detta att läggas till i HTTP-huvudet:

<meta http-equiv="expires" content="8 mars 2004" />

Talar om för en sökmotor hur den skall indexera ett dokument:

<meta name="robots" content="index,nofollow" />

Länk
Tagg Attribut Beskrivning Exempel
<link/> id class style title xml:lang dir charset href hreflang type rel rev media Anges i huvudet på HTML-dokumentet. Används för att ange en relation mellan det aktuella HTML-dokumentet och ett annat dokument. Vanliga attribut är "href", "rel" och "type". <link href="style.css" rel="stylesheet" type="text/css" title="My stylesheet"/>
Bas
Tagg Attribut Beskrivning Exempel
<base/> href Anges i huvudet på HTML-dokumentet. Innebär att browsern istället för att använda den nuvarande URL:en som bas, använder den angivna URL:en för att lösa ut de relativa länkarna i HTML-dokumentet. <base href="http://www.dsv.su.se/~kris-lau/"/>